<template>
  <div>
    <el-table
      ref="_table"
      class="big_screen_table"
      :stripe="stripe"
      :data="data"
      :height="height"
      :max-height="maxHeight"
      :header-row-style="headerrowstyle"
      :header-cell-style="headercellstyle"
      :row-style="rowstyle"
      :cell-style="cellstyle"
      :style="{ '--stripeBg': stripeBg }"
      @row-click="rowClick"
    >
      <template v-for="(item, index) in columns">
        <template v-if="item.type === 'index'">
          <el-table-column
            :key="index"
            :type="item.type"
            :index="item.index"
            :label="item.label"
            :width="item.width"
            :min-width="item.minWidth"
            :align="item.align"
          >
            <template slot-scope="scope">
              <slot
                :scope="scope"
                :row="scope.row"
                v-if="item.slot"
                :name="item.slot"
                :data="scope.row[item.slot]"
              />
            </template>
          </el-table-column>
        </template>
        <template v-else>
          <template v-if="item.formatter">
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="item.width"
              :min-width="item.minWidth"
              :align="item.align"
              :show-overflow-tooltip="item.showOverflowTooltip"
              :formatter="item.formatter"
            />
          </template>
          <template v-else>
            <el-table-column
              :key="index"
              :label="item.label"
              :prop="item.prop"
              :width="item.width"
              :min-width="item.minWidth"
              :align="item.align"
              :show-overflow-tooltip="item.showOverflowTooltip"
            >
            </el-table-column>
          </template>
        </template>
      </template>
    </el-table>
  </div>
</template>

<script>
export default {
  name: "index",
  components: {},
  props: {
    stripe: {
      type: Boolean,
      default: true,
    }, // 是否为斑马纹 table
    stripeBg: {
      type: String,
      default: "rgba(0,105,255,.12)",
    },
    columns: {
      type: Array,
      required: true,
      validator: (cols) => {
        return cols.length >= 1; //表格至少需要1列
      },
    },
    data: {
      type: Array,
      default: () => {
        return [];
      },
    },
    height: [Number, String],
    maxHeight: [Number, String],
    headerRowStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    headerCellStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    rowStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
    cellStyle: {
      type: Object,
      default: () => {
        return {};
      },
    },
  },
  data() {
    return {
      dHeaderRowStyle: {
        backgroundColor: "rgba(0,105,255,.24)",
        height: "40px",
      },
      dHeaderCellStyle: {
        backgroundColor: "transparent !important",
        color: "#fff",
        fontSize: "18px",
        fontFamily: "PingFangSC",
        borderBottom: "none",
      },
      dRowStyle: {
        backgroundColor: "transparent !important",
        height: "40px",
      },
      dCellStyle: {
        backgroundColor: "rgba(0,105,255,.08)",
        marginTop: "1px",
        color: "rgba(255,255,255,0.9)",
        fontSize: "16px",
        fontFamily: "PingFangSC",
        borderTop: "2px solid #00183a",
        borderBottom: "none",
      },
    };
  },
  computed: {
    headerrowstyle() {
      return Object.assign({}, this.dHeaderRowStyle, this.headerRowStyle);
    },
    headercellstyle() {
      return Object.assign({}, this.dHeaderCellStyle, this.headerCellStyle);
    },
    rowstyle() {
      return Object.assign({}, this.dRowStyle, this.rowStyle);
    },
    cellstyle() {
      return Object.assign({}, this.dCellStyle, this.cellStyle);
    },
  },
  mounted() {},
  methods: {
    // 当某一行被点击时会触发该事件
    rowClick(row, column, event) {
      this.$emit("row-click", row, column, event);
    },
  },
};
</script>

<style scoped lang="scss">
.big_screen_table {
  background-color: transparent !important;
  &:before {
    display: none;
  }
  ::v-deep {
    .el-table__cell {
      padding: 0;
    }
  }
  ::v-deep .el-table__cell.gutter {
    width: 5px !important;
    background-color: transparent !important;
  }
  ::v-deep .el-table__row--striped {
    .el-table__cell {
      background-color: var(--stripeBg) !important;
    }
  }
  ::v-deep .is-scrolling-none {
    &::-webkit-scrollbar {
      // 滚动条整体部分
      width: 5px;
      height: 0; // 纵向滚动条 必写
      background: transparent;
    }
    &::-webkit-scrollbar-thumb {
      // 内嵌滑块
      border-radius: 10px;
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      opacity: 0.2;
      background: #0a4577;
    }
    &::-webkit-scrollbar-track {
      // 外层轨道
      -webkit-box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
      border-radius: 0;
      background: transparent;
    }
  }
}
</style>
